<!--
 * @Description: 
 * @Autor: lds
 * @LastEditors: lds
-->
<template>
    <fieldset>
        <legend> 接口</legend>
        <input v-model="loginForm.username" />
        <input v-model="loginForm.password" type="password" />
        <button @click="Login">登录</button>
        <button @click="getTv">查询电视剧</button>
        <button @click="getEnv">环境变量</button>


        <ul>
            <li v-for=" it  in state.groups" :key="it.n_member">
                <img class="img" :src="it.picture" alt="">
                {{ it.name }}
            </li>
        </ul>
    </fieldset>
</template>
<script lang="ts" setup>
import api from "@/api/index";
import url from "@/api/url";
const loginForm = reactive({
    username: "",
    password: "",
});
let state: any = reactive({
    groups: []
})



const Login = async () => {
    const data = await api.login(loginForm, 'post');
    console.log(data);
};
const getTv = async () => {
    const data: any = await api.http('get', url.douban);
    state.groups = data.groups
    console.log(data);
};
const getEnv = () => {

    //MODE，用来指明现在所处于的模式，一般通过它进行不同环境的区分，比如 dev、test、pre、prd 等等，默认为：“development”
    // BASE_URL，用来请求静态资源初始的 url
    // PROD，用来判断当前环境是否是正式环境
    // DEV，用来与 PROD 相反的环境
    // SSR，用来判断是否是服务端渲染的环境
    console.log(import.meta.env) //查看相关信息 这里不显示非VITE开头的变量
}
</script>

<style lang="scss">
.img {
    width: 50px;
    height: 50px;
}
</style>
